<template>
  <section class="page-container">
    <section class="operate-btn">
      <p>根据DXC设计提供了4种不同宽度的dialog，分别为small、default、large，默认为空，hi-size属性为空时，采用width值，默认取 50%。</p>
      <section class="item">
        1、 size: small；=>  width: 466px；
        <el-button
          type="primary"
          @click="changeDialogSize('small')"
        >
          open small dialog
        </el-button>
      </section>

      <section class="item">
        2、 size: default；=>  width: 600px
        <el-button
          type="primary"
          @click="changeDialogSize('default')"
        >
          open default dialog
        </el-button>
      </section>

      <section class="item">
        3、 size: large；=>  width: 960px
        <el-button
          type="primary"
          @click="changeDialogSize('large')"
        >
          open large dialog
        </el-button>
      </section>

      <section class="item">
        4、 dialog中加入fullscreen属性 =>   全屏
        <el-button
          type="primary"
          @click="changeDialogSize('full')"
        >
          open full dialog
        </el-button>
      </section>
    </section>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      :hi-size="dialogSize"
      @cancel="dialogVisible = false"
      @confirm="dialogVisible = false"
    >
      <p>something</p>
      <p>something</p>
      <p>something</p>
    </el-dialog>

    <el-dialog
      v-model="fullDialogVisible"
      :title="dialogTitle"
      fullscreen
      @cancel="dialogVisible = false"
      @confirm="dialogVisible = false"
    >
      <p>something</p>
      <p>something</p>
      <p>something</p>
    </el-dialog>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const dialogVisible = ref(false);
const fullDialogVisible = ref(false);
const dialogSize = ref('default');
const dialogTitle = ref('default Dialog');

const changeDialogSize = (val: string) => {
  if(val === 'full') {
    fullDialogVisible.value = true;
  }else {
    dialogVisible.value = true;
    dialogSize.value = val;
  }
  dialogTitle.value = `${val} Dialog`;
};
</script>

<style scoped lang="scss">
.page-container {
  width: 100%;
  height: 100%;

  .operate-btn {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;

    .item {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 400px;
    }

    .#{$namespace}-button {
      width: 50%;
    }

    .#{$namespace}-button + .#{$namespace}-button {
      margin-left: 0;
    }
  }
}
</style>
